<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿淘宝tab栏切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style-type: none;
        }

        .wrapper {
            width: 1200px;
            margin: 0 auto;
        }

        .tab-panel {
            background-color: #fff;
        }

        .tab-panel#demo1 {
            width: 450px;
            margin: 300px auto;
        }

        .tab-panel#demo2 {
            width: 150px;
            margin: 0 auto;
            padding: 50px 0 10px 0;
        }

        .tab-panel>.tab-btns {
            display: flex;
            box-sizing: border-box;
            cursor: pointer;
        }

        .tab-panel>.tab-btns>li {
            width: 25%;
            border: 1px solid #eee;
            border-bottom-color: orangered;
        }

        .tab-panel>.tab-btns>li.btns-selected {
            border: 1px solid orangered;
            position: relative;
            color: orangered;
        }

        .tab-panel>.tab-btns>li.btns-selected::after {
            content: "";
            display: block;
            position: absolute;
            width: calc(100% - 2px);
            height: 4px;
            bottom: -1px;
            background-color: #fff;
        }

        .tab-panel>.tab-btns>li>.layer {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px 0;
        }

        .tab-panel#demo2>.tab-btns>li>.layer {
            padding: 0;
        }

        .tab-panel>.tab-btns>li>.layer:last-of-type {
            border: 0;
        }

        .tab-panel>.tab-btns>li>.layer>.tab-btns-icon {
            width: 24px;
            height: 24px;
            background-image: url(images/taobao_sprite.png);
            background-position-x: 0;
        }

        .tab-panel>.tab-btns>li>.layer>.btns-sprite-phone {
            background-position-y: 0;
        }

        .tab-panel>.tab-btns>li>.layer>.btns-sprite-insurance {
            background-position-y: -44px;
        }

        .tab-panel>.tab-btns>li>.layer>.btns-sprite-travel {
            background-position-y: -88px;
        }

        .tab-panel>.tab-btns>li>.layer>.btns-sprite-game {
            background-position-y: -132px;
        }

        .tab-panel>.tab-btns>li>.layer>.tab-btns-tit {
            margin-top: 10px;
        }

        .tab-panel>.tab-contents>li {
            height: 230px;
            border: 1px solid orangered;
            border-top: 0;
        }

        .tab-panel#demo2>.tab-contents>li {
            height: 50px;
        }

        .tab-panel>.tab-contents>li>img {
            width: 100%;
            height: 100%;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="tab-panel" id="demo1">
            <ul class="tab-btns" id="tab1">
                <li class="outli">
                    <div class="layer">
                        <div class="tab-btns-icon btns-sprite-phone"></div>
                        <div class="tab-btns-tit">充话费</div>
                    </div>
                </li>
                <li class="outli">
                    <div class="layer">
                        <div class="tab-btns-icon btns-sprite-travel"></div>
                        <div class="tab-btns-tit">旅行</div>
                    </div>
                </li>
                <li class="outli">
                    <div class="layer">
                        <div class="tab-btns-icon btns-sprite-insurance"></div>
                        <div class="tab-btns-tit">车险</div>
                    </div>
                </li>
                <li class="outli">
                    <div class="layer">
                        <div class="tab-btns-icon btns-sprite-game"></div>
                        <div class="tab-btns-tit">游戏</div>
                    </div>
                </li>
            </ul>
            <ul class="tab-contents" id="con1">
                <li>
                    <img src="images/content1.png" alt="Image" title="content1">
                </li>
                <li>
                    <img src="images/content2.png" alt="Image" title="content2">
                </li>
                <li>内容框3</li>
                <li>
                    <div class="tab-panel" id="demo2">
                        <ul class="tab-btns" id="tab2">
                            <li>
                                <div class="layer">
                                    <div class="tab-btns-icon btns-sprite-phone"></div>
                                    <div class="tab-btns-tit">充话费</div>
                                </div>
                            </li>
                            <li>
                                <div class="layer">
                                    <div class="tab-btns-icon btns-sprite-travel"></div>
                                    <div class="tab-btns-tit">旅行</div>
                                </div>
                            </li>
                            <li>
                                <div class="layer">
                                    <div class="tab-btns-icon btns-sprite-insurance"></div>
                                    <div class="tab-btns-tit">车险</div>
                                </div>
                            </li>
                            <li>
                                <div class="layer">
                                    <div class="tab-btns-icon btns-sprite-game"></div>
                                    <div class="tab-btns-tit">游戏</div>
                                </div>
                            </li>
                        </ul>
                        <ul class="tab-contents" id="con2">
                            <li>
                                <img src="images/content1.png" alt="image" title="content1">
                            </li>
                            <li>
                                <img src="images/content2.png" alt="image" title="content2">
                            </li>
                            <li>内容框3</li>
                            <li>内容框4</li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script src="js/googTab.js"></script>
    <script>
        var gt = new GoogTab({
            el: '#demo1', // tab容器节点 
            btnEl: '#tab1', // 标签按钮容器节点 譬如 tab-btns.ul
            btnChildEl: 'li', // 标签按钮子容器节点 tab-btns下的li
            contEl: '#con1',// 内容容器节点 譬如 tab-contents.ul
            contChildEl: '#con1>li', // 内容子容器节点  tab-contents下的li
            eventName: 'click', // ?可选 事件名 不填默认 click
        });

        /* 
            gt.init 说明 gt.init(_callback,_callback)
            参数一  回调函数 当eventName触发条件满足时执行 
                   形参选项:
                          ①满足当前触发条件的tab选项按钮 ②满足当前触发条件的tab选项按钮对应的内容框
                          ③满足当前触发条件的tab选项按钮或者内容框对应下标
                          ④所有的tab选项按钮 ⑤所有的内容框
            参数二  回调函数 执行init方法就会被调用函数
                   形参选项:
                          ①所有的tab选项按钮 ②所有的内容框
        
        */

        gt.init((btnItem, contItem) => { // 对应相应事件的按钮 btnItem,contItem i 是遍历索引 
            gt.removeClass('btns-selected', gt.$edit.$btnChildEl);
            gt.addClass('btns-selected', btnItem);
            gt.hideEl(gt.$edit.$contChildEl); // 隐藏元素 这里隐藏所有内容框
            gt.showEl(contItem); // 显示选中的元素
            // gt.setVal('哇哦好帅哦',contItem) // 设置值
        }, (btnItems, contItems) => { // 默认调用函数
            gt.hideEl(gt.$edit.$contChildEl); // 隐藏元素 这里隐藏所有内容框
            gt.addClass('btns-selected', btnItems[0]); // 给第一个选项按钮加样式
            gt.showEl(contItems[0]); // 显示第一个元素 这里显示第一个内容框
        });

        /* 测试嵌套 */
        var gt2 = new GoogTab({
            el: '#demo2', // tab容器节点
            btnEl: '#tab2', // 标签按钮容器节点 譬如 tab-btns.ul
            btnChildEl: 'li', // 标签按钮子容器节点 tab-btns下的li
            contEl: '#con2',// 内容容器节点 譬如 tab-contents.ul
            contChildEl: 'li', // 内容子容器节点  tab-contents下的li
            eventName: 'click', // ?可选 事件名 不填默认 click
        });
        /* 
            gt.init 说明 gt.init(_callback,_callback)
            参数一  回调函数 当eventName触发条件满足时执行 
                   形参选项:
                          ①满足当前触发条件的tab选项按钮 ②满足当前触发条件的tab选项按钮对应的内容框
                          ③满足当前触发条件的tab选项按钮或者内容框对应下标
                          ④所有的tab选项按钮 ⑤所有的内容框
            参数二  回调函数 执行init方法就会被调用函数
                   形参选项:
                          ①所有的tab选项按钮 ②所有的内容框
        
        */
        gt2.init((btnItem, contItem, index) => { // 对应相应事件的按钮 btnItem,contItem i 是遍历索引  
            gt2.removeClass('btns-selected', gt2.$edit.$btnChildEl);
            gt2.addClass('btns-selected', btnItem);
            gt2.hideEl(gt2.$edit.$contChildEl); // 隐藏元素 这里隐藏所有内容框
            gt2.showEl(contItem); // 显示选中的元素
            gt.setVal('哇哦小加好帅哦' + (index + 1), contItem) // 设置值
        }, (btnItems, contItems) => { // 默认调用函数
            gt2.hideEl(gt2.$edit.$contChildEl); // 隐藏元素 这里隐藏所有内容框
            gt2.addClass('btns-selected', btnItems[0]); // 给第一个选项按钮加样式
            gt2.showEl(contItems[0]); // 显示第一个元素 这里显示第一个内容框
        });
    </script>
</body>

</html>